<template>
    <div>
        <div class="box">
            <div class="search">
                <div class="search-top">
                    <el-icon>
                        <Search />
                    </el-icon>
                    筛选搜索
                </div>
                <div>
                    <el-button @click="resetKeyword">重置</el-button>
                    <el-button type="primary" @click="getlistFn()">查询搜索</el-button>
                </div>
            </div>
            <div>
                <div class="input">
                    <el-form-item label="活动名称：" label-width="150px">
                        <el-input v-model="payload.keyword" />
                    </el-form-item>
                </div>
            </div>
        </div>
        <div class="record">
            <div class="record-top">
                <span>
                    <el-icon>
                        <Tickets />
                    </el-icon>
                </span>
                <span>数据列表</span>
            </div>
            <div>
                <el-button @click="router.push('/sms/flashSession')">秒杀时间段列表</el-button>
                <el-button @click="dialogVisible = true">添加活动</el-button>
            </div>
        </div>
    </div>

    <el-table ref="multipleTableRef" border :data="state.list">
        <el-table-column type="selection" />
        <el-table-column property="id" label="编号"></el-table-column>
        <el-table-column property="title" label="活动标题" />
        <el-table-column label="活动状态">
            <template #default="scope">
                {{
                    new Date(scope.row.startDate).getTime() < new Date().getTime() &&
                    new Date(scope.row.endDate).getTime() > new Date().getTime()
                        ? '活动进行中'
                        : '活动未开始'
                }}
            </template>
        </el-table-column>
        <el-table-column label="开始时间">
            <template #default="scope">
                {{ fomatDate(scope.row.startDate) }}
            </template>
        </el-table-column>
        <el-table-column label="结束时间">
            <template #default="scope">
                {{ fomatDate(scope.row.endDate) }}
            </template>
        </el-table-column>
        <el-table-column label="上线/下线">
            <template #default="scope">
                <el-switch
                    @click="changeHandle(scope.row)"
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.status"
                />
            </template>
        </el-table-column>
        <el-table-column property="name" label="操作" width="200px">
            <template #default="scope">
                <el-button
                    link
                    type="primary"
                    @click="router.push(`/sms/selectSession?id=${scope.row.id}`)"
                >
                    设置商品
                </el-button>
                <el-button link type="primary" @click="eidt(scope.row)">编辑</el-button>
                <el-button link type="primary" @click="delFn(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <div class="demo-pagination-block">
            <el-pagination
                v-model:currentPage="payload.pageNum"
                v-model:page-size="payload.pageSize"
                :page-sizes="[5, 10, 15]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </ElConfigProvider>

    <div>
        <el-dialog v-model="dialogVisible" title="添加活动" width="40%">
            <el-form-item label="活动标题：" prop="count" label-width="200px">
                <div>
                    <el-input v-model="state.data.title" style="width: 100%"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="开始时间：" label-width="200px">
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker
                            v-model="state.data.startDate"
                            type="date"
                            label="Pick a date"
                            placeholder="请选择时间"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="结束时间：" label-width="200px">
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-date-picker
                            v-model="state.data.endDate"
                            type="date"
                            label="Pick a date"
                            placeholder="请选择时间"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="上线/下线" label-width="200px">
                <el-radio-group v-model="state.data.status" class="ml-4">
                    <el-radio :label="1" size="large">上线</el-radio>
                    <el-radio :label="0" size="large">下线</el-radio>
                </el-radio-group>
            </el-form-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addFn">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue';
import { reactive, ref, toRefs } from 'vue';
import { user } from '@/api';
import { fomatDate } from '@/utils';
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { useRouter } from 'vue-router';
const router = useRouter();
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const dialogVisible = ref(false);
// 定义请求的变量
const payload = reactive({
    keyword: '',
    pageNum: 1,
    pageSize: 5,
});
// 定义渲染的变量
const state = reactive<{ list: IFlashListModel[]; total: number; data: IFlashListModel }>({
    list: [],
    total: 0,
    data: {
        createTime: new Date().toJSON(),
        endDate: '',
        id: 0,
        startDate: '',
        status: 1,
        title: '',
    },
});

// 提取请求复用
const getlistFn = () => {
    user.flashListApi(payload).then(res => {
        if (res.code == 200) {
            console.log(res.data.list);
            state.list = res.data.list;
            state.total = res.data.total;
        }
    });
};
// 进来获取列表页渲染
getlistFn();
// 改变pageSize时
const handleSizeChange = (val: number) => {
    getlistFn();
};
// 改变pageNum时
const handleCurrentChange = (val: number) => {
    getlistFn();
};
// 改变上下限状态
const changeHandle = (row: IFlashListModel) => {
    ElMessageBox.confirm('确定要改变状态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            user.updateStatus({ id: Number(row.id), status: row.status })
                .then(res => {
                    ElMessage({
                        message: res.message,
                        type: res.code === 200 ? 'success' : 'error',
                    });
                })
                .catch(err => {
                    row.status = row.status == 1 ? 0 : 1;
                });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            });
            row.status = row.status == 1 ? 0 : 1;
        });
};
// 重置
const resetKeyword = () => {
    payload.keyword = '';
};
// 添加活动 编辑
const eidt = (row: IFlashListModel) => {
    dialogVisible.value = true;
    state.data.createTime = row.createTime;
    state.data.endDate = row.endDate;
    state.data.startDate = row.startDate;
    state.data.id = row.id;
    state.data.title = row.title;
    state.data.status = row.status;
};
const addFn = () => {
    console.log(111);

    if (state.data.id == 0) {
        // 添加
        ElMessageBox.confirm('确定要改变状态吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
            .then(() => {
                user.flashcreate(state.data).then(res => {
                    ElMessage({
                        message: res.message,
                        type: res.code === 200 ? 'success' : 'error',
                    });
                    dialogVisible.value = false;
                    getlistFn();
                    state.data.createTime = new Date().toJSON();
                    state.data.endDate = '';
                    state.data.startDate = '';
                    state.data.id = 0;
                    state.data.title = '';
                    state.data.status = 0;
                });
            })
            .catch(() => {
                dialogVisible.value = false;
                state.data.createTime = new Date().toJSON();
                state.data.endDate = '';
                state.data.startDate = '';
                state.data.id = 0;
                state.data.title = '';
                state.data.status = 0;
            });
    } else {
        ElMessageBox.confirm('确定要改变状态吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
            .then(() => {
                user.flashUpdate(state.data).then(res => {
                    ElMessage({
                        message: res.message,
                        type: res.code === 200 ? 'success' : 'error',
                    });
                    dialogVisible.value = false;
                    getlistFn();
                    state.data.createTime = new Date().toJSON();
                    state.data.endDate = '';
                    state.data.startDate = '';
                    state.data.id = 0;
                    state.data.title = '';
                    state.data.status = 0;
                });
            })
            .catch(() => {
                dialogVisible.value = false;
                state.data.createTime = new Date().toJSON();
                state.data.endDate = '';
                state.data.startDate = '';
                state.data.id = 0;
                state.data.title = '';
                state.data.status = 0;
            });
    }
};

// 删除
const delFn = (id: number) => {
    ElMessageBox.confirm('确定要改变状态吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        user.flashDelete(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? 'success' : 'error',
                });
                getlistFn();
            }
        });
    });
};

// const { data } = toRefs(state)
// const { title } = toRefs(state.data)
// const { title } = toRefs(data)
</script>

<style lang="less" scoped>
.box {
    border: 1px solid #c0c4d1;
    padding: 20px;
    color: black;

    .search {
        display: flex;
        justify-content: space-between;
    }

    .input {
        margin-top: 20px;
        width: 350px;
    }
}

.record {
    border: 1px solid #c0c4d1;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    // height: 50px;
    // line-height: 50px;
    padding: 20px;
    color: black;
}

.demo-pagination-block {
    display: flex;
    justify-content: flex-end;
}

:deep(.cell) {
    text-align: center;
    padding: 10px;
}
</style>
